<template>
	<view class="tree">
		
		<!-- :key="arrayKey?((index+indexkey) +item[arrayKey]):index" -->
		<tree-item v-for="(item,index) in data" 
			:key="arrayKey?item[arrayKey]:index"
			:data="item"
			:dataKey="dataKey" 
			:arrayKey="arrayKey" 
			:childrenKey="childrenKey" 
			:jointkey="jointkey" 
			@itemClick="itemClick" 
			:slotKey="slotKey"
			:disable="disable">
			<template v-slot="slotData">
				<slot :item="slotData.item" :path="[item,...slotData.path]"></slot>
			</template>
		</tree-item>
	</view>
</template>
<script>
	import TreeItem from './tree-item.vue'
	/**
	 * Tree 树型结构展示
	 * @description 用于显示树型结构
	 * @tutorial https://xxx.xxx.net.cn
	 * @property {Array} data 展示数据
	 * @property {String} dataKey = 数据显示文字key
	 * @property {String} arrayKey = v-for循环key
	 * @property {String} childrenKey = 子节点key
	 * @event {Function} itemClick 点击子节点时触发
	 */
	export default {
		name: "tree",
		data() {
			return {
				open: false,
				indexkey:'1',
			}
		},
		components: {
			TreeItem
		},
		props: {
			data: {
				default: function() {
					return []
				}
			},
			dataKey: {
				default: "label"
			},
			arrayKey: {
				default:'id'
			},
			childrenKey: {
				default: "children"
			},
			jointkey:{
				default:''
			},
			disable:{
				type: String,
				default: 'disable'
			},
			slotKey: {
				default: function() {
					return []
				}
			}
		},
		methods: {
			itemClick(item) {
				this.$emit('itemClick', item)
			}
		}

	}
</script>
<style>
	.tree {
		width: calc(100% - 40rpx);
		padding:0 20rpx;
	}
</style>
